<template>
	<view class="page-body">
		<view class="uni-padding-wrap uni-common-mt">
			<view class="progress">
				<movable-area class="c">
					<cmd-progress :percent="num" :strokeWidth="20" strokeShape="round" stroke-color="linear-gradient(to right, #6d74f8, #4f1ef6,#3b00f9)"></cmd-progress>
					<movable-view direction="horizontal" class="p" :x="x" :y="y" @change="onChange"></movable-view>
				</movable-area>
			</view>
			<view class="uni-title uni-common-mt">
				官方示例 1
				<text>\nmovable-view 区域小于 movable-area</text>
			</view>
			<movable-area>
				<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
			</movable-area>
			<view @tap="tap" class="uni-link uni-center uni-common-mt">
				点击这里移动至 (30px, 30px)
			</view>
			<view class="uni-title uni-common-mt">
				示例 2
				<text>\nmovable-view区域大于movable-area</text>
			</view>
			<movable-area>
				<movable-view class="max" direction="all">text</movable-view>
			</movable-area>
			<view class="uni-title uni-common-mt">
				示例 3
				<text>\n只可以横向移动</text>
			</view>
			<movable-area>
				<movable-view direction="horizontal">text</movable-view>
			</movable-area>
			<view class="uni-title uni-common-mt">
				示例 4
				<text>\n只可以纵向移动</text>
			</view>
			<movable-area>
				<movable-view direction="vertical">text</movable-view>
			</movable-area>
			<view class="uni-title uni-common-mt">
				示例 5
				<text>\n可超出边界</text>
			</view>
			<movable-area>
				<movable-view direction="all" out-of-bounds>text</movable-view>
			</movable-area>
			<view class="uni-title uni-common-mt">
				示例 6
				<text>\n带有惯性</text>
			</view>
			<movable-area>
				<movable-view direction="all" inertia>text</movable-view>
			</movable-area>
			<view class="uni-title uni-common-mt">
				示例 7
				<text>\n可放缩</text>
			</view>
			<movable-area scale-area>
				<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
			</movable-area>
			<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
				点击这里放大3倍
			</view>
		</view>
		
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components:{
			cmdProgress
		},
	    data() {
	    	return {
	    		x: 0,
	    		y: 0,
	    		scale: 2,
	    		old: {
	    			x: 0,
	    			y: 0,
	    			scale: 2
	    		},
				width:0,
				num:0,
	    	}
	    },
		onReady() {
			 let query = uni.createSelectorQuery().in(this);
			 query.select('.c').boundingClientRect(data => {
			 	this.width = data.width
			 }).exec();
		},
	    methods: {
	    	tap: function(e) {
	    		// 解决view层不同步的问题
	    		this.x = this.old.x
	    		this.y = this.old.y
	    		this.$nextTick(function() {
	    			this.x = 30
	    			this.y = 30
	    		})
	    	},
	    	tap2() {
	    		// 解决view层不同步的问题
	    		this.scale = this.old.scale
	    		this.scale = this.old.scale
	    		this.$nextTick(function() {
	    			this.scale = 3
	    		})
	    	},
	    	onChange: function(e) {
	    		this.old.x = e.detail.x
	    		this.old.y = e.detail.y
				// 高
				// 具体宽度自己计算 这里只展示方法
				this.num =((this.old.x / (this.width - 80)) * 100).toFixed(0) * 1
				if(this.old.x > this.width-30){
					this.$toast("到顶了哦",2)
				}
				
	    	},
	    	onScale: function(e) {
	    		this.old.scale = e.detail.scale
	    	}
	    }
	}
</script>

<style scoped> 
	.page-body{
		background: #F5F5F5;
	}
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 150rpx;
		width: 150rpx;
		background-color: #007AFF;
		color: #fff;
	}
	
	movable-area {
		height: 300rpx;
		width: 100%;
		background-color: #D8D8D8;
		overflow: hidden;
	}
	.max {
		width:500rpx;
		height: 500rpx;
	}
	.progress{
		width: 100%;
		height: 100rpx;
		background: #19BE6B;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.c{
		width: 90%;
		height: 50rpx;
		background-color:rgba(0,0,0,0);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.p{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
</style>